<template>
	<!-- 收货地址页面 -->
	<view class="content">
		<view v-if="showcen">
			<view class="address_ul">
				<view class="address_li" v-for="(address,index) in address" :key="index">
					<view class="address_li_tp">
						<view class="address_li_tp_tp">
							<view class="name">{{address.name}}</view>
							<view class="tel">{{address.tel}}</view>
						</view>
						<view class="address_li_tp_bt">
							{{address.address}}
						</view>
					</view>
					<view class="address_li_bt">
						<view class="address_li_bt_left">
							 <radio-group @change="radioChange">
							                        <label class="uni-list-cell uni-list-cell-pd">
							                            <view>
							                                <radio :value="address.value" :checked="index === current" color="#ff80c0"/>
							                            </view>
							                        </label>
							  </radio-group>
							设置默认
						</view>
						<view class="address_li_bt_right">
							<navigator hover-class="none" url="./addaddress" class="dkl">
								<image src="../../static/bianji.png" class="sm_img" mode="widthFix"></image>
								编辑
							</navigator>
							<view class="dkl" style="margin-left:25rpx;">
								<image src="../../static/shanchu.png" class="sm_img" mode="widthFix"></image>
								删除
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="nobox">
			<image src="../../static/noadd.png" mode="widthFix" class="noadd_img"></image>
			<view class="noadd_span">您暂时没有任何收货地址哦！</view>
		</view>
		<navigator class="addjian" hover-class="none" url="./newaddress">+新建地址</navigator>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data (){
			return{
				topState:false,
				showcen:true,  //是否存在收货地址
				current: 0,
				address:[
					{
						name:'A股难民',
						tel:'13925509476',
						address:'广东省东莞市南城 鸿福路中环100，916',
						value:0
						
					},
					{
						name:'张新超',
						tel:'13925509476',
						address:'广东省东莞市南城 鸿福路中环100，916',
						value:1
					}
				]
			}
			},
			// 回到顶部start
			onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
			    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
			        this.topState = true
			    }else{ //当距离小于200时关闭回到顶部按钮
			        this.topState = false
			    }
			},
			// 回到顶部end
			methods:{
				   radioChange: function(evt) {  //单选
					   console.log(evt)
				            for (let i = 0; i < this.address.length; i++) {
				                    this.current = evt.target.value;
				                    break;
				            }
							},
				top() { //回到顶部
				　　　　uni.pageScrollTo({ 
				　　　　　　scrollTop: 0, duration: 300 
				　　　　}); 
				　　}
			
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.nobox{
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
	}
	.noadd_img{
		width:250rpx;
		margin:150rpx auto 50rpx;
	}
	.noadd_span{
		width:100%;
		font-size:30rpx;
		color:#666;
		text-align: center;
	}
	.addjian{
		background: #ff80c0;
		width:100%;
		text-align: center;
		position: fixed;
		bottom:0;
		padding:25rpx 0;
		font-size:30rpx;
		color:#fff;
	}
	.address_ul{
		margin-top:20rpx;
	}
	.address_li{
		width:90%;
		padding:20rpx 5% 0;
		margin-top:20rpx;
		background-color: #fff;
	}
	.address_li_bt_left{
		display: flex;
		align-items:center;
	}
	.address_li_tp{
		border-bottom:2rpx solid #ebebeb;
	}
	.address_li_tp_tp{
		display: flex;
		align-items: center;
	}
	.name{
			font-size:30rpx;
	}
	.tel{
		font-size:30rpx;
		margin-left:40rpx;
	}
	.address_li_tp_bt{
		padding:15rpx 0;
		color:#999;
	}
	.address_li_bt{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:15rpx 0;
	}
	.sm_img{
		width:35rpx;
		margin-right:10rpx;
	}
	.address_li_bt_right{
		display: flex;
		align-items:center;
	}
	.dkl{
		display: flex;
		align-items: center;
		color:#999;
	}
</style>
